<template>
    <div>
<!--  修改信息页面      -->
        <el-card style="height: 450px">
            <h4 align="left">更改信息</h4>
            <!--布局容器Main开始-->
            <div align="center" >
                <!--            <el-descriptions title="更改信息" >-->
                <el-divider></el-divider>
                <!--分割线-->
                <div style="width: 500px">
                    <el-form ref="editForm" :model="editForm" :rules="rules" label-width="80px">

                        <el-form-item label="顾客昵称" prop="nickname">
                            <el-input v-model="editForm.nickname" ></el-input>
                        </el-form-item>

                        <!-- <el-form-item label="手机号码">-->
                        <!-- <el-input v-model="editForm.tel" value="666"></el-input>-->
                        <!-- </el-form-item>-->

                        <el-form-item label="性别" prop="gender">
                            <el-radio-group v-model="editForm.gender" :value=editForm.gender >
                                <el-radio label="男">男士</el-radio>
                                <el-radio label="女">女士</el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item label="顾客姓名" prop="userName">
                            <el-input v-model="editForm.userName"></el-input>
                        </el-form-item>

                        <el-form-item label="身份证号" prop="idNum">
                            <el-input v-model="editForm.idNum"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="goon"@click="onEditSubmit">更改</el-button>
                            <el-button>取消</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <!--            </el-descriptions>-->
            </div>
            <!--布局容器Main结束-->
        </el-card>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                unLogin:true,
                user:{},
                editForm:{
                    nickname:'',
                    gender:'',
                    userName:'',
                    idNum:''
                },
                rules: {
                    nickname: [
                        {required: true, message: '请输入昵称称', trigger: 'blur'},
                        {min: 2, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur'}
                    ],
                    gender: [
                        {required: true, message: '请选择性别', trigger: 'blur'},
                        {pattern: /^[男女]{1}$/, message: '男/女', trigger: 'blur'}
                    ],
                    userName: [
                        {required: false, message: '请输入真实姓名', trigger: 'blur'},
                        {min: 2, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur'}
                    ],
                    idNum: [
                        {required: false, message: '请输入身份证号', trigger: 'blur'},
                        {pattern: /^\d{17}(\d|X)$|^$/, message: '请输入正确的身份证号', trigger: 'blur'}
                    ],
                }
            };
        },
        methods: {
            loadCustomerInfo(){
                console.log("loadCustomerInfo....");
                let url='http://localhost:9080/customercenter/info';
                console.log('url='+url);
                this.axios.get(url).then((response)=>{
                    let responseBody=response.data;
                    if(responseBody.state==20000){
                        this.editForm=responseBody.data;
                    }
                });
            },
            onEditSubmit(){
                console.log("onEditSubmit....");
                let editFormData=this.qs.stringify(this.editForm)
                console.log("editFormData:"+editFormData);
                //提交更改请求,不用RespondBody接收
                let url="http://localhost:9080/customercenter/update";
                this.axios.post(url,editFormData).then((response)=>{
                    let responseBody=response.data;
                    if (responseBody.state == 20000) {
                        this.$message({
                            message: '资料修改成功！',
                            type: 'success'
                        });
                        this.loadCustomerInfo();
                    } else if (responseBody.state == 40400) {
                        this.$alert(responseBody.message, '警告', {
                            confirmButtonText: '确定',
                            callback: action => {
                            }
                        });
                    } else {
                        this.$message.error(responseBody.message);
                    }
                });
            },

        },
        created() {
            console.log("created开始请求列表数据");

        },
        mounted() {
            console.log("mounted开始请求数据");
            this.loadCustomerInfo();
        }
    }
</script>
